<template>
	<view class="page-container pb-0 bg-grey">
		<up-navbar safeAreaInsetTop fixed placeholder :autoBack="true">
			<template #center>
				<zjy-navbar-tabs :tabs="tabs" @tabClick="handleTabChange" :activeId="activeId" />
			</template>
		</up-navbar>
		<zjy-search placeholder="搜索手机号/客户姓名" />
		<zjy-filters :data="filterData" @close="filterClose" />
		<scroll-view
			:scroll-y="true"
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="triggered"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
			@refresherabort="onAbort"
			class="plr-24 pt-24"
			:style="{
				height: scrollViewHeight,
			}"
		>
			<template v-if="listData && listData.length > 0">
				<block v-if="activeId == '1'">
					<view v-for="(item, index) in listData" :key="index" class="pb-16">
						<view class="zjy-card-form">
							<view class="flex-a">
								<image
									src="https://oiz.zhijingyou.com/upload/2024/lvapps/1726650540-532718099638976.jpg"
									class="icon-72 circle"
									mode="aspectFill"
								/>
								<view class="flex-1 ml-16">
									<view class="space-between flex-a">
										<view class="flex-a">
											<text class="fs-28">小乖吃喝玩乐记</text>
											<image :src="imgBaseUrl + 'level-bronze.png'" class="icon-36 ml-8" />
											<text class="c-brown-bc">默认等级</text>
										</view>
										<view class="fs-20 c-grey-86">2024-11-01 加入</view>
									</view>
									<view class="fs-20 c-grey-86 mt-4">未绑定手机号</view>
								</view>
							</view>
							<view class="total-content">
								<view class="total-item">
									<view class="title">累计成交</view>
									<view class="value">&yen;13,498</view>
								</view>
								<view class="total-item">
									<view class="title">累计订单</view>
									<view class="value">32</view>
								</view>
								<view class="total-item">
									<view class="title">邀请团员</view>
									<view class="value">31</view>
								</view>
								<view class="total-item">
									<view class="title">绑定客户</view>
									<view class="value">21</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-if="activeId == '2'">
					<view v-for="(item, index) in listData" :key="index" class="pb-16">
						<view class="zjy-card-form pos-rel">
							<view class="flex-a mtb-8">
								<image :src="imgBaseUrl + 'icon-check.png'" class="icon-48 mr-24" />
								<image
									src="https://oiz.zhijingyou.com/upload/2024/lvapps/1726650540-532718099638976.jpg"
									class="icon-120 radius-16"
									mode="aspectFill"
								/>
								<view class="flex-1 ml-20 flex-col space-between h-120">
									<view class="fs-28 font-500">小乖吃喝玩乐记</view>
									<view class="c-grey-86">157261526151</view>
									<view class="c-grey-86">11-01 16:12 加入</view>
								</view>
								<view class="status-label">待审核</view>
								<view class="btn-audit">
									<zjy-button size="small">审核</zjy-button>
								</view>
							</view>
						</view>
					</view>
				</block>
			</template>
			<zjy-empty emptyText="暂无订单" v-else-if="!freshing && searched"></zjy-empty>
		</scroll-view>
		<view v-if="activeId == '2'" class="bottom-fixed-wrap">
			<view class="full-width space-between">
				<view class="flex-a">
					<image :src="imgBaseUrl + 'icon-uncheck.png'" class="icon-48" />
					<text class="fs-28 c-grey-4e ml-8 mr-16">全选</text>
					<view class="flex">
						已选择
						<text class="c-brown-bc">1</text>
						个人数
					</view>
				</view>
				<zjy-button width="248">批量审核</zjy-button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { SortList } from "@/components/zjy-filters/constant"
import zjyFilters from "@/components/zjy-filters/index.vue"
import useCommonStore from "@/store/common"
import type { ZjyTabItem } from "@/types/common"
import { freshLoading } from "@/utils/fresh-loading"
import { onLoad } from "@dcloudio/uni-app"

const imgBaseUrl = inject("imgBaseUrl")
const commonStore = useCommonStore()
const scrollViewHeight = computed(() => {
	if (activeId.value == "1") {
		return `calc(100vh - ${commonStore.statusBarHeight + commonStore.navbarHeight}px - 176rpx)`
	}
	return `calc(100vh - ${
		commonStore.statusBarHeight + commonStore.navbarHeight + commonStore.safeAreaBottomHeight
	}px - 176rpx - 128rpx)`
})
const searched = ref(false)
const activeId = ref("1")
const tabs = ref<ZjyTabItem[]>([
	{
		name: "团员列表",
		id: "1",
	},
	{
		name: "团员审核",
		id: "2",
	},
])

const handleTabChange = (type: string) => {
	activeId.value = type
}

const search = () => {}
//#region 初始化下拉刷新
const freshLoadingRef = freshLoading()
let {
	loadMore,
	triggered,
	onPulling,
	onRefresh,
	onRestore,
	onAbort,
	getListData,
	listData,
	freshing,
	getListSuccessCallback,
} = freshLoadingRef
freshLoadingRef.listService.value = null
getListSuccessCallback.value = () => {
	searched.value = true
}
freshLoadingRef.listData.value.push(...[1, 2, 3, 4, 5])
//#endregion

//#region 筛选
const filterData = ref<any[]>([])
const filterClose = (data: any) => {
	console.log(data)
}
const initFilter = async () => {
	filterData.value = [
		{
			title: "全部日期",
			key: "date",
			type: "date",
		},
		{
			title: "综合排序",
			key: "sort",
			type: "single",
			value: SortList[0].id,
			data: SortList,
		},
	]
}
//#endregion
onLoad(() => {
	initFilter()
})
</script>
<style lang="scss" scoped>
.filters {
	height: 88rpx;
	background: $c-white;
}
.total-content {
	border-radius: 0 16rpx 16rpx 16rpx;
	background: #f6f6f9;
	margin-top: 28rpx;
	padding: 24rpx;
	display: flex;
	.total-item {
		flex: 1;
		text-align: center;
		.title {
			color: $c-grey-86;
		}
		.value {
			margin-top: 4rpx;
			font-size: 28rpx;
			font-weight: 500;
		}
	}
}
.status-label {
	position: absolute;
	top: 2rpx;
	right: 2rpx;
	padding: 6rpx 8rpx;
	background: #fff4da;
	border-radius: 0 16rpx 0 16rpx;
	color: $brown-bc;
}
.btn-audit {
	position: absolute;
	bottom: 40rpx;
	right: 24rpx;
}
</style>
